<template>
  <div
    class="user-tab-list-area"
    :class="[center ? 'flx-row-c-c' : 'flx-row-s-c']"
  >
    <template v-if="!normal">
      <template v-if="list.length == 1">
        <div class="flx-row-s-s user-tab-center">
            <div
                class="f-16 f-w-600 c-black"
                v-for="(item, index) in list"
                :key="index"
                >
                {{ item.name }}
            </div>
            <div v-if="cidList.length > 1" class="pub-m-l-35 flx-row-s-c">
               <span
                v-for="(item, index) in cidList"
                :key="'r' + index"
                class="select-item"
                :class="[index == cidSelect ? 'active' : 'normal']"
                style="margin-right: 40px"
                @click="cidSelectChange(index,item.id)"
                >
                {{ item.username }}
               </span>
            </div>

        </div>

      </template>
      <template v-else>
        <template v-for="(item, index) in list">
          <div v-if="active == index" class="item active-item" :key="index">
            {{ item.name }}
          </div>
          <template v-else>
            <a
              v-if="item.other"
              :href="item.to"
              class="item normal-item"
              :key="index"
              >{{ item.name }}</a
            >
            <div
              v-else
              class="item normal-item"
              :key="index"
              @click="toPage(item.to)"
            >
              {{ item.name }}
            </div>
          </template>
        </template>
      </template>
    </template>
    <template v-else>
      <div
        v-for="(item, index) in list"
        class="item"
        style="cursor: pointer"
        :class="[normalActive == index ? 'active-item' : 'normal-item']"
        :key="index"
        @click="clickItem(index)"
      >
        {{ item.name }}
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "VipUsertablist",
  props: {
    list: {
      default: () => [],
    },
    backUrl: {
      default: "",
    },
    normal: {
      default: false,
    },
    center: {
      default: false,
    },
    cidList:{
      default: () => [],
    },
    cidSelect:{
      default :0
    }

  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.active = newValue.meta.tabIndex;
      },
    },
  },
  computed:{
     cidSelected: {
      get() {
        return this.cidSelect;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  data() {
    return {
      active: null,
      normalActive: 0
    };
  },
  mounted() {},
  methods: {
    clickItem(index) {
      this.normalActive = index;
      this.$emit("click-tab", index);
    },
    toPage(to) {
      if (to == this.$route.path) {
        this.$router.go(0);
      } else {
        this.$router.push(to);
      }
    },
    cidSelectChange(index,id){
        this.cidSelected = index
        this.$emit('cidSelectChange',{index:index,id:id})
    }
  },
};
</script>

<style lang="scss" scoped>
.user-tab-list-area {
  height: 36px;
  border-bottom: 1px solid #e4e6fa;
  background-color: #fff;
  position: relative;
  .item {
    display: inline-block;
    margin: 0 14px;
    padding: 0 12px;
    font-size: 15px;
    line-height: 22px;
    color: #000;
    padding-bottom: 12px;
    border-bottom: transparent 2px solid;
    transition: border-color 0.3s, color 0.3s;
  }
  &:hover {
    cursor: pointer;
  }
  .normal-item {
    color: #000;

    &:hover {
      color: $mainColor;
      cursor: pointer;
      font-weight: 600;
    }
  }
  .active-item {
    color: $mainColor;
    border-color: $mainColor;
    font-weight: 600;
  }
  .return-button {
    margin-right: 10px;
    cursor: pointer;
  }
  .cart-img {
    @include size(21px);
  }
   .select-item {
    min-width: 137px;
    max-width: 200px;
    height: 28px;
    font-size: 14px;
    transition: color 0.3s;
    border-radius: 4px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    padding:0 20px;
    flex-shrink: 1;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;


    &.normal {
      border: 1px solid #e4e6fa;
      color: #000;
    }
    &.active,
    &:hover {
      @include h-c($mainColor, $color-main-8, #fff, #fff);
    }
  }
}
.user-tab-center {
  align-items: center;
  margin-bottom: 10px;
}
</style>
